<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/sys/base :: headFragment(~{::title},~{::link},~{::style})"></head>
<title>头像上传</title>
<!--    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">-->
<link rel="stylesheet" th:href="@{/static/css/font-awesome/css/font-awesome.min.css}" media="all">
<!--    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">-->
<link rel="stylesheet" th:href="@{/static/js/jquery-cropper/bootstrap/bootstrap.min.css}">
<!--    <link rel="stylesheet" href="https://unpkg.com/cropperjs/dist/cropper.css">-->
<link rel="stylesheet" th:href="@{/static/js/jquery-cropper/cropper/cropper.css}">
<link rel="stylesheet" th:href="@{/static/js/jquery-cropper/css/main.css}">
</head>
<body>
<script th:replace="/sys/base :: scriptFragment"></script>
<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>-->
<script th:src="@{/static/js/jquery-cropper/bootstrap/bootstrap.bundle.min.js}"></script>
<!--<script src="https://unpkg.com/cropperjs/dist/cropper.js"></script>-->
<script th:src="@{/static/js/jquery-cropper/cropper/cropper.js}"></script>
<!--<script src="https://fengyuanchen.github.io/js/common.js"></script>-->
<script th:src="@{/static/js/jquery-cropper/jquery-cropper.min.js}"></script>
<script th:src="@{/static/js/jquery-cropper/main.js}"></script>
<script th:src="@{/static/js/baseUtil.js}" charset="utf-8"></script>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-9" style="padding:5px 5px 0;">
            <div class="img-container">
                <!-- 上传的原图片 -->
                <img id="image" alt="请选择一张图片" th:src="@{/static/img/welcome.png}">
            </div>
        </div>
        <div class="col-md-3" style="padding:5px 5px 0 0;">
            <!-- 裁剪后的图片展示区域 -->
            <div class="docs-preview clearfix">
                <div class="img-preview preview-lg"></div>
                <!--                <div class="img-preview preview-md"></div>-->
                <!--                <div class="img-preview preview-sm"></div>-->
                <!--                <div class="img-preview preview-xs"></div>-->
            </div>
            <!-- 裁剪后的图片数据 -->
            <div class="docs-data">
                <div class="input-group input-group-sm">
                    <span class="input-group-prepend">
                      <label class="input-group-text" for="dataWidth">宽度</label>
                    </span>
                    <input type="text" class="form-control" id="dataWidth" placeholder="" disabled="disabled">
                    <span class="input-group-append">
                        <span class="input-group-text">px</span>
                    </span>
                </div>
                <div class="input-group input-group-sm">
                    <span class="input-group-prepend">
                      <label class="input-group-text" for="dataHeight">高度</label>
                    </span>
                    <input type="text" class="form-control" id="dataHeight" placeholder="" disabled="disabled">
                    <span class="input-group-append">
                      <span class="input-group-text">px</span>
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-9 docs-buttons">
            <div class="btn-group">
                <label class="btn btn-primary btn-upload" for="inputImage" title="上传" style="background-color:#f0f0f0;color:#212529;border-color:#f0f0f0;">
                    <input type="file" class="sr-only" id="inputImage" name="file"
                           accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff"> <!-- 文件上传按钮，默认隐藏 -->
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="上传">
                        <span class="fa fa-upload"></span>
                     </span>
                </label>
                <button type="button" class="btn btn-default" title="保存" id="saveImage">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="保存">
                      <span class="fa fa-save"></span>
                    </span>
                </button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn" data-method="reset" title="重置">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="重置">
                      <span class="fa fa-refresh"></span>
                    </span>
                </button>
                <button type="button" class="btn" data-method="setDragMode" data-option="move"
                        title="移动">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="移动">
                      <span class="fa fa-arrows"></span>
                    </span>
                </button>
                <button type="button" class="btn" data-method="setDragMode" data-option="crop"
                        title="剪切">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="剪切">
                      <span class="fa fa-crop"></span>
                    </span>
                </button>
                <button type="button" class="btn" data-method="zoom" data-option="0.1" title="放大">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="放大">
                      <span class="fa fa-search-plus"></span>
                    </span>
                </button>
                <button type="button" class="btn" data-method="zoom" data-option="-0.1" title="缩小">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="缩小">
                      <span class="fa fa-search-minus"></span>
                    </span>
                </button>
                <button type="button" class="btn" data-method="rotate" data-option="-45"
                        title="左旋转">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="左旋转">
                      <span class="fa fa-rotate-left"></span>
                    </span>
                </button>
                <button type="button" class="btn" data-method="rotate" data-option="45" title="右旋转">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="左旋转">
                      <span class="fa fa-rotate-right"></span>
                    </span>
                </button>
            </div>

            <!-- 展示选择的图片 -->
            <div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true"
                 aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="getCroppedCanvasTitle">Cropped</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body"></div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <a class="btn btn-primary" id="download" href="javascript:void(0);"
                               download="cropped.jpg">下载</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 docs-toggles">
            <div class="btn-group d-flex flex-nowrap" data-toggle="buttons">
                <label class="btn btn-info active">
                    <input type="radio" class="sr-only" id="aspectRatio0" name="aspectRatio"
                           value="1.7777777777777777">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false"
                          title="比例: 16 / 9">16:9</span>
                </label>
                <label class="btn btn-info">
                    <input type="radio" class="sr-only" id="aspectRatio1" name="aspectRatio"
                           value="1.3333333333333333">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="比例: 4 / 3">4:3</span>
                </label>
                <label class="btn btn-info">
                    <input type="radio" class="sr-only" id="aspectRatio2" name="aspectRatio" value="1">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="比例: 1 / 1">1:1</span>
                </label>
                <label class="btn btn-info">
                    <input type="radio" class="sr-only" id="aspectRatio3" name="aspectRatio"
                           value="0.6666666666666666">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="比例: 2 / 3">2:3</span>
                </label>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" th:inline="javascript">
    layui.use(['jquery', 'layer'], function () {
        var $ = layui.jquery;

        $("#saveImage").on("click", function () {
            // 原始图片文件对象
            var imageObj = $('#image');
            // 获得裁剪框的canvas节点
            var cropCanvas = imageObj.cropper('getCroppedCanvas');
            // 获取图片的Base64地址，通过attr(src)放到img节点里即可展示
            var cropUrl = cropCanvas.toDataURL('image/png', 0.4); // 图片质量(0-1)越好图片大小越大
            // 将Base64的图片转化成Blob
            var blob = $.dataURItoBlob(cropUrl);

            // 将数据编译成键值对，以便用XMLHttpRequest来发送数据
            var formData = new FormData();
            formData.append("baseAdminAccount", [[${#authentication.principal.username}]]); // 当前认证的管理员账号
            formData.append("baseUploadFileType", "image"); // 上传文件的类型。image,text,video,excel,word,pdf
            formData.append("baseUploadCategory", "cover"); // 上传文件的业务场景。例如:cover(头像图片上传)
            formData.append("baseUploadMultipartFiles", blob, new Date().getTime() + ".png"); // 图片的二进制格式
            $.ajax({
                url: $.getProjectNameLI() + '/asyn/uploadFile',
                type: 'POST',
                data: formData,
                processData: false,  // tell jQuery not to process the data
                contentType: false,  // tell jQuery not to set contentType
                success: function (res) {
                    if (res.code === 0) {
                        $.ajax({
                            url: $.getProjectNameLI() + "/sys/admin/updateUserInfo",
                            async: false,
                            type: "post",
                            dataType: "json",
                            data: {
                                id: [[${#authentication.principal.id}]]
                                , cover: res.data.filePathArray[0]
                            },
                            success: function (res) {
                                layer.msg(res.code === 0 ? "更新成功" : res.message, {time: 1500}, function () {
                                    window.top.location.reload();
                                });
                            }
                            , complete: function (xhr) {
                                $.ajaxCompleteLI(xhr);
                            }
                        });
                    } else {
                        layer.msg(res.message);
                    }
                }
                , error: function (jqXHR, textStatus, error) {
                    layer.msg(error);
                }
            });
        });
    });

</script>

</body>

</html>
